JS or CSS - 列印頁面

Posted on | In

UserAgent：

sessionStorageBefore：

localStorageBefore：

cookieBefore：

utm_source：

==================1

LOGIC1：

LOGIC2：

LOGIC2New：

==================2

sessionStorageAfter：

localStorageAfter：

cookieAfter：


Normal

add UTM

效果：列印功能。
欲列印的部分都是需要載入之後才可以列印。

1. 按下按鈕啟動可列印的部分被列印(JS)

參考資料：https://stackoverflow.com/questions/16894683/how-to-print-html-content-on-click-of-a-button-but-not-the-page

頁面完全載入後，按下列印按鈕指定可列印的部分被列印。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="printableArea">
      <h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

請注意這個方法在某些環境下似乎沒有辦法成功運作，詳見第二個方法的參考資料連結的回答！

2. 只使用CSS

參考資料：https://stackoverflow.com/questions/468881/print-div-id-printarea-div-only?noredirect=1&lq=1

這個我就沒使用過了，但似乎是最乾淨的解決辦法，應該是使用css把可以列印的部分先在頁面中藏起來，避免被使用者看到。

1
2
3
4
5
6
7
8
9
10
11
12
13
@media print {
	body * {
		visibility: hidden;
	}
	#section-to-print, #section-to-print * {
		visibility: visible;
	}
	#section-to-print {
		position: absolute;
		left: 0;
		top: 0;
	}
}

3. JS中Window物件的print()方法

1
<body onload="print()">

這其實是JavaScript中Window物件的print()方法：https://www.w3schools.com/jsref/met_win_print.asp

我是用在於項目清單列表上的列印按鈕，按下列印按鈕會到跳轉該項目的詳細資料頁面，一旦頁面載入完成就會自動跳出列印提示。